<template>  
  <div class="signature-pad">  
    <div class="canvas-container">  
      <canvas id="canvas"></canvas>  
    </div>  
    <div class="controls">  
      <button @click="clearCanvas">清除</button>  
      <button @click="saveSignature">保存</button>  
    </div>  
  </div>  
</template>  
  
<script>  
import SignaturePad from 'signature_pad';  
  
export default {  
  data() {  
    return {  
      signaturePad: null,  
    };  
  },  
  mounted() {  
    this.initializeSignaturePad();  
  },  
  methods: {  
    initializeSignaturePad() {  
      const canvas = document.getElementById('canvas');  
      this.signaturePad = new SignaturePad(canvas, {  
        // 可选配置项，根据需要自行调整  
      });  
    },  
    clearCanvas() {  
      this.signaturePad.clear();  
    },  
    saveSignature() {  
      const signatureDataUrl = this.signaturePad.toDataURL();  
      console.log(signatureDataUrl)
      // 将签字数据提交给后端服务器或其他处理逻辑  
      // ...  
    },  
  },  
};  
</script>